<!--
 * @Descripttion: 
 * @version: 
 * @Author: wutao
 * @LastEditors: wutao
 * @LastEditTime: 2025-09-18 22:57:27
-->
<template>
  <div>
    <!-- <div class="top_hytitle" style="margin-top: 0">
      <div class="letf_line"></div>
      <div class="center_text">欢迎回来</div>
      <div class="right_line"></div>
    </div> -->
    <div class="">
      <p style="margin: 15px 0; color: #9998a9">
        {{ formatTimestamp(topList.createTime) }}
      </p>

      <div class="top-box" :class="isShadow ? 'boxShadow' : ''">
        <p>
          <!-- 用正则匹配中英文冒号，只分一次 -->
          <!-- <template v-if="topList.title.match(/[:：]/)">
            {{ topList.title.split(/[:：]/)[0] }}：
            <strong>{{
              topList.title.split(/[:：]/).slice(1).join("：")
            }}</strong>
          </template> -->
          <template>
            {{ topList.title }}
          </template>
        </p>
        <!-- <span style="font-weight: bold">{{ topList.entrance }}</span> -->

        <!-- {{this.topList.type}} -->
        <div class="video-img" @click="openH5">
          <img :src="topList.card[0].name" alt="" />

          <img src="@/assets/images/jpttxsbk_notplay.png" alt="" />
        </div>
        <div style="display: flex">
          <div
            class="touzi"
            v-show="topList.type == 'jptjetf'"
            v-for="(topItemlinkUrl, topItemlinkUrlIndex) in topList.linkUrl"
            :key="'list2-' + topItemlinkUrlIndex"
            @click="gotodetails(topItemlinkUrl)"
          >
            <img src="@/assets/images/etf_icon.png" alt="" />
            <span>{{ topItemlinkUrl.name }}</span>
          </div>
        </div>

        <div class="top-box-btn" @click="djrbseechance">
          {{ topList.btnText }}
        </div>
        <p class="askMe">你可以尝试这样问我</p>
        <div
          @click="sendMessageBy(topItemLink)"
          v-for="(topItemLink, topItemLinkIndex) in topList.link"
          class="top-box-list-item-link"
          :key="topItemLinkIndex"
        >
          {{ topItemLink }}
        </div>
      </div>
    </div>
  </div>
</template>
    
    <script>
import {} from "@/utils/common";
import { Toast } from "vant";
import commonFunc from "@/utils/ysjh";
export default {
  data() {
    return {
    };
  },
  props: {
    topList: {
      type: Object,
      default: () => {},
    },
    isShadow: {
      type: Boolean,
      default: false,
    },
  },
  watch: {},
  mounted() {},
  created() {
    console.log(this.topList, "topListtopListtopList投教视频");
    //1精品投教ETF 2 新手必看1， 3 新手必看2， 4进阶必备1， 5进阶必备2，6高手工具1， 7高手工具2
    if (this.topList.type == "jptjjjjz") {
      this.topList.btnText = "看更多价值百科视频";
    }

    // if (this.topList.type == "jptjXS") {
    //   this.topList.status = 2;
    //   this.topList.btnText = "看更多概念百科视频";
    // }

    if (this.topList.type == "jptjgsgz") {
      this.topList.btnText = "看更多规则百科视频";
    }
    if (this.topList.type == "jptjxsrs") {
      this.topList.btnText = "看更多入市百科视频";
    }
    if (this.topList.type == "jptjxsgn") {
      this.topList.btnText = "看更多概念百科视频";
    }

    if (this.topList.type == "jptjjjjs") {
      this.topList.btnText = "看更多技术百科视频";
    }

    if (this.topList.type == "jptjgstz") {
      this.topList.btnText = "看更多投资百科视频";
    }

    if (this.topList.type == "jptjgsgn") {
      this.topList.btnText = "看更多概念百科视频";
    }
    if (this.topList.type == "jptjgsjz") {
      this.topList.btnText = "看更多价值百科视频";
    }
    if (this.topList.type == "jptjetf") {
      this.topList.btnText = "看更多ETF百科视频";
    }
  },
  methods: {
    sendMessageBy(e) {
      this.$parent.showCollect = false;
      this.$parent.someMethod(e);
    },
    gotodetails(item) {
      console.log(item.url, "itme");
      let openSource = item.url.openSource;
      let openType = item.url.openType;
      let functionCode = item.url.functionCode;
      let param = item.url.param;
      commonFunc.openService(openSource, openType, functionCode, param);
    },
    djrbseechance() {
      console.log(typeof this.topList.url, "this.topList1");
      let openSource = this.topList.url.openSource;
      let openType = this.topList.url.openType;
      let functionCode = this.topList.url.functionCode;
      let param = this.topList.url.param;
      commonFunc.openService(openSource, openType, functionCode, param);
    },
    openH5() {
      console.log(this.topList.card[0], "this.topList.card[0].sub");
      let openSource = "";
      let openType = this.topList.card[0].url.openType;
      let functionCode = this.topList.card[0].url.functionCode;
      let param = this.topList.card[0].url.param;
      // let openSource='';
      //  let openType = "3";
      //    let functionCode = "KDS_WebPageWithHead";
      // let param = {
      //   webUrl:
      //     "https://saas0.yundzh.com/?r=26&source=shibaWx&yk=0#/gyzq/liveBack/39041?fromUn=Pnr6JI20Mm7",
      //   loginType: "1",
      // };
      // console.log(openSource);
      // console.log(openType);
      // console.log(functionCode);
      // console.log(param);
      commonFunc.openService(openSource, openType, functionCode, param);
      // window.open(this.topList.card[0].sub, "_blank");
    },
    formatTimestamp(ms) {
      if (!ms) {
        return "";
      }
      const time = Number(ms);
      if (!time || isNaN(time)) return "-";
      const d = new Date(time);
      const Y = d.getFullYear();
      const M = String(d.getMonth() + 1).padStart(2, "0");
      const D = String(d.getDate()).padStart(2, "0");
      const h = String(d.getHours()).padStart(2, "0");
      const m = String(d.getMinutes()).padStart(2, "0");
      const s = String(d.getSeconds()).padStart(2, "0");
      return `${Y}-${M}-${D} ${h}:${m}:${s}`;
    },
  },
};
</script>
    
   <style lang="less" scoped>
.ztfx-span {
  opacity: 1;
  color: #666666 !important;
  font-family: PingFang SC;
  font-weight: regular;
  font-size: 16px;
  line-height: 26px;
  letter-spacing: 0px;
  text-align: justified;
  background: none !important;
  font-weight: normal !important;
}
.top-box-list-item-border {
  // border-bottom: 1px solid #aecde8;
}
.topItem-con {
  margin-top: 10px;
  line-height: 25px;
  font-size: 16px;
  max-height: 100px;
  overflow: hidden;
}

.video-img {
  height: 150px;
  margin-top: 10px;
  position: relative;
}
.video-img img:nth-child(1) {
  height: 150px;
  width: 100%;
  object-fit: cover;
  border-radius: 11px;
}

.video-img img:nth-child(2) {
  height: 50px;
  width: 50px;
  position: absolute;
  left: 50%;
  margin-left: -25px;
  top: 50%;
  margin-top: -25px;
}
.touzi {
  justify-content: start;
  border-radius: 8px;
  background: linear-gradient(to right, #d5edfd, #edecfd);
  // background: url("@/assets/images/etficon_bg.png") no-repeat center center;
  background-size: contain;
  // width: 134px;
  padding: 8px 12px;
  // height: 36px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  color: #333333;
  font-weight: 500;
  font-size: 13px;
}
.touzi:nth-child(2) {
  margin-left: 5px;
}
.touzi img {
  height: 16px;
  margin-right: 3px;
}
</style>
    